﻿<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus1" style="width:50%;height:100%"></div>
    <div id="globus2" style="width:50%;height:100%"></div>
    <script type="module">
        'use strict';

        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';

        var osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        var sat = new XYZ("MapQuest Satellite", {
            shininess: 20,
            specular: [0.00048, 0.00037, 0.00035],
            diffuse: [0.88, 0.85, 0.8],
            ambient: [0.15, 0.1, 0.23],
            isBaseLayer: true,
            url: "//tileproxy.cloud.mapquest.com/tiles/1.0.0/sat/{z}/{x}/{y}.png",
            visibility: true,
            attribution: '�2014 MapQuest - Portions �2014 "Map data � <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"'
        });

        var globus1 = new Globe({
            "target": "globus1",
            "name": "Earth OSM",
            "terrain": new GlobusTerrain(),
            "layers": [osm]
        });

        var globus2 = new Globe({
            "target": "globus2",
            "name": "Earth SAT",
            "terrain": new GlobusTerrain(),
            "layers": [sat]
        });
    </script>
</body>

</html>